<template>
    <view class="measure" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar></nav-bar>
        <view class="container">
            <view class="title">
                {{ titleText }}
            </view>
            <view class="sub-title">
                <view v-if="currentType == 0" class="sub-title-text">
                    1.身体坐直，吸满气后，憋气，并按下【开机】按钮
                    <br>
                    2.在10s内，对着仪器吹气口吹气
                    <br>
                    3.吹气时，不要间断、弯腰
                    <br>
                    4.尽量以适中的流量吹气
                </view>
                <view v-if="currentType == 1" class="sub-title-text">
                    1.在10s内，对准仪器吹气口吹气
                    <br>
                    2.吹气期间不要间断
                </view>
                <view v-if="currentType == 2" class="sub-title-text">
                    1.吹气流量尽可能控制在流量刻度尺的中部
                </view>
            </view>
            <view class="steps-box">
                <u-steps :current=" currentType ">
                    <u-steps-item>
                        <view slot="icon" class="steps-icon" :class=" { 'steps-icon-acitve': currentType == 0 } ">1
                        </view>
                        <view slot="desc" class="steps-item" :class=" { 'acitve': currentType == 0 } ">
                            吸气
                            <br>
                            准备
                        </view>
                    </u-steps-item>
                    <u-steps-item>
                        <view slot="icon" class="steps-icon" :class=" { 'steps-icon-acitve': currentType == 1 } ">2
                        </view>
                        <view slot="desc" class="steps-item" :class=" { 'acitve': currentType == 1 } ">
                            10s内
                            <br>
                            开始吹气
                        </view>

                    </u-steps-item>
                    <u-steps-item>
                        <view slot="icon" class="steps-icon" :class=" { 'steps-icon-acitve': currentType == 2 } ">3
                        </view>
                        <view slot="desc" class="steps-item" :class=" { 'acitve': currentType == 2 } ">
                            一次性
                            <br>
                            吹完气体
                        </view>

                    </u-steps-item>
                </u-steps>
            </view>
            <view v-if="currentType == 0">
                <view class="cutline">
                    <view class="steps-title">
                        1
                    </view>
                    <view class="steps-img">
                        <image
                            src="http://oss.antaimedical.com/images/static/2024/08/66aae823e4b09217821c0f9c0INhny33SHn204f32aecc98b6d82008257a4f0b1a05d.png"
                            class="start" />
                    </view>
                    <view class="steps-tip">
                        身体坐直，吸满气后，憋气
                    </view>
                </view>
                <view class="cutline">
                    <view class="steps-title">
                        2
                    </view>
                    <view class="steps-img">
                        <image
                            src="http://oss.antaimedical.com/images/static/2024/08/66ac4e90e4b000d2c606b51a69i70itZWCBC857fde7ad88ff655902feaf1411117c2.png"
                            class="start" />
                    </view>
                    <view class="steps-tip">
                        按下仪器【开机】按键进入
                        <br>
                        下一步
                    </view>
                </view>
            </view>
            <view v-if="currentType == 1">
                <view class="text">10s内开始吹气</view>
                <image
                    src="http://oss.antaimedical.com/images/static/2024/08/66b07b46e4b09217821c0f9fcdpdsAh8nEW05eccbf4d1c00c4ac378bc479b4815cfa.png"
                    class="start" />
                <view class="time-icon">
                    <view class="time-num">
                        {{ timeout }}
                    </view>
                    <view class="circle">
                    </view>
                </view>
            </view>
            <view v-if="currentType == 2">
                <view class="blow-text">你当前的吹气量（ml）</view>
                <view class="blow-box">
                    <u-icon name="heart-fill" size="50" color="#545DDE"></u-icon>
                    <view class="blow-num">{{ blowNum }}</view>
                </view>
            </view>
            <!-- <view class="progress_b" v-if="showTimeout">
				<view class="timeout">
					倒计时{{ timeout }}秒
				</view>
				<u-line-progress :showText="false" inactiveColor="#D1D3F6" activeColor="#545DDE"
					:percentage="percentage" />
			</view> -->
            <view class="total_bar" v-if="currentType == 2">
                <view class="tag">
                    <text class="max">{{ measureInfo[0].data }}</text>
                    <text class="high" :style=" { bottom: highP + '%' } ">{{ measureInfo[2].data }}</text>
                    <text class="mid" :style=" { bottom: midP + '%' } ">适中</text>
                    <text class="low" :style=" { bottom: lowP + '%' } ">{{ measureInfo[4].data }}</text>
                    <text class="min">{{ measureInfo[5].data }}</text>
                    <!-- <view class="normal_c">
						<image 
							src="http://oss.antaimedical.com/images/static/2024/05/664ef918eb14d0f049f44ceasAUZ4ubOOCWqec4e449009ac6485c58c067966dea1de.png"
							class="normal"></image>
						<view class="normal">

						</view>
						<view class="right">
							
						</view>
					</view> -->
                    <view class="bar">
                        <view class="grid" v-for="(item, index) in measureInfo" :key=" index "
                            :style=" { backgroundColor: getColorList(index) } ">
                        </view>
                        <!-- <image :style="{bottom: barPercent + '%'}"
							src="http://oss.antaimedical.com/images/static/2024/05/664ef918eb14d0f049f44ceasAUZ4ubOOCWqec4e449009ac6485c58c067966dea1de.png"
							class="normal"></image> -->
                        <view class="triangle" :style=" { bottom: percentHeight + '%' } "></view>
                    </view>
                    <!-- <view class="b-r">
						<view class="grid" :class="{other: index == 5}" v-for="(item,index) in measureInfo"
							:key="index">
							<text class="txt" :class="{none: index == 0,o_c: index == 3}"
								v-if="index != 1">{{ item.data }}</text>
						</view>
					</view> -->
                </view>

                <view class="tips">
                    L/min
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    mapState,
    mapGetters
} from 'vuex'
import {
    ab2hex,
    hex2int,
    hex2float,
    hexToString,
    intHex2
} from '@/utils/utils.js'
import {
    findInhaleThreeVal,
    addExpirationData,
    addExhaleCorrelationMsg,
    findEffectiveTimes,
    abandonMeasure,
    findBodyIsVaild,
    findBodyValidException,
    updateExhaleVal
} from '@/api/index.js'
import {
    ooo4,
    ooo8,
    oood,
    oooe,
} from '@/api/bleApi.js'
const BLE = require('@/utils/ble.js')
const dayjs = require('@/utils/dayjs.min.js');
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync('userId'),
            currentType: 0, // 0肺活量测量介绍,1开始吹气介绍,2持续吹气介绍
            titleText: "肺活量测量",
            blowNum: 0,//吹气量
            allBlowNum: 0,//时刻t之前的所有流量值之和
            blowNumTimer: null,//计算吹气量定时器
            timeout: 10,
            totalTime: 30,
            showTimeout: true,
            percent: 0,
            percentHeight: 0,
            barPercent: 0,
            timer: null,
            noting: null,
            lineObj: {},
            flowStatus: 'none',
            flowImg: '',
            measureInfo: [{
                data: 63
            },
            {
                data: 53
            },
            {
                data: 45
            },
            {
                data: '适中'
            },
            {
                data: 30
            },
            {
                data: 0
            },
            ],
            highP: 0,
            midP: 0,
            lowP: 0,
            flow: [], // 流量
            CO2CONC: [], //CO2浓度
            CO2Rh: ['0.0'], // CO2湿度值
            CO2TEMP: ['0.0'], // CO2温度值
            m_flow: [], // 流量缺失序号
            m_CO2CONC: [], //CO2浓度缺失序号
            m_CO2Rh: [], // CO2湿度值缺失序号
            m_CO2TEMP: [], // CO2温度值缺失序号
            filter_flow:[],// 流量缺失序号 筛选出的
            filter_CO2CONC:[],// CO2浓度缺失序号 筛选出的
            degree: {
                one: 0,
                two: 0,
                three: 0,
                four: 0
            },
            exhale_none: 0, // 是否开始吹气标识（0为未开始，1为已开始）
            exhale_tag: 0, // 是否开始吹气标识（0为未开始，1为已开始）
            exhale_flow_thresh: 5, // 判断此流量是否吹气的阈值，大于此值则认为用户在吹气，否则不在吹气
            exhale_num_thresh: 3, // 未吹气时，流量值连续>exhale_flow_thresh的最大次数
            exhale_stop_num_thresh: 3, // 已吹气时，流量值连续<exhale_flow_thresh的最大次数
            exhale_num: 0, // 未吹气时，检测到流量值连续大于exhale_flow_thresh的次数
            exhale_stop_num: 0, // 已吹气时，检测到流量值连续小于exhale_flow_thresh的次数
            flow_max: 0,
            CO2CONC_max: 0,
            CO2Rh_max: 0,
            CO2TEMP_max: 0,
            startTime: '',
            endTime: '',
            totalValue: 0,
            type: ''
        }
    },
    computed: {
        ...mapState({
            ble: state => state.ble, // 实时蓝牙全局状态
            userInfo: state => state.userInfo,
            // deviceInfo: state => state.deviceInfo
        }),
        ...mapGetters({
            deviceInfo: 'getDeviceInfo'
        }),
        integrity () {
            return this.degree.one >= this.CO2CONC_max && this.degree.two >= this.CO2TEMP_max && this.degree
                .three >= this.CO2Rh_max && this.degree.four >= this.flow_max
        },
        // totalStatus() {
        // 	if (this.flowStatus == 'fastMax') {
        // 		return '流速过快'
        // 	} else if (this.flowStatus == 'fast') {
        // 		return '流速较快'
        // 	} else if (this.flowStatus == 'normal') {
        // 		return '流速适中'
        // 	} else if (this.flowStatus == 'slow') {
        // 		return '流速较慢'
        // 	} else if (this.flowStatus == 'slowMin') {
        // 		return '流速过慢'
        // 	}
        // },
        percentage () {
            let currentTime = this.percent / 10
            currentTime = currentTime.toFixed(2)
            return currentTime * 100
        },
        title () {
            if (this.timeout >= 10) {
                return '测量肺活量'
            } else if (this.timeout < 10) {
                return '正在测量肺活量...'
            }
        }
    },
    watch: {
        'ble.state': {
            handler (nVal, oVal) {
                if (nVal == -1 && oVal == 0) {
                    // 意外断开
                    this.$store.commit('changeBleMeasureState', 2)
                    uni.showModal({
                        title: '提示',
                        content: '检测到蓝牙已断开,请重新连接后再进行测量',
                        showCancel: false,
                        confirmText: '确定',
                        success: (errModal) => {
                            if (errModal.confirm) {
                                if (this.type == 'default') { // 默认注册流程
                                    uni.redirectTo({
                                        url: '/pagesB/login/device/connect/index'
                                    })
                                } else { // 更新肺活量流程
                                    uni.redirectTo({
                                        url: '/pagesA/health/device/connect/index?type=updateExhale'
                                    })
                                }
                            }
                        }
                    })
                }
            }
        },
        currentType (nVal) {
            if (nVal == 2) {
                this.blowNumTimer = setInterval(() => {
                    this.blowNum = Number(((this.allBlowNum / 60 / 10) * 1000).toFixed(0))
                }, 1000);
            }
        },

        flow (nVal, oVal) {
            if (nVal.length && !oVal.length) {
                clearTimeout(this.noting)
            }
        },
        flowStatus (nVal, oVal) {
            if (nVal == 'normal' && oVal != 'normal') {
                this.flowImg =
                    'http://oss.antaimedical.com/images/static/2024/04/662a2014eb14d0f049f44cdab7WnVGu5K3Lf8ae1481221b6d5a44255ded72336ae68.gif'
            } else if (nVal == 'fast' && oVal != 'fast') {
                this.flowImg =
                    'http://oss.antaimedical.com/images/static/2024/04/662a1e2ceb14d0f049f44cd9m7qrXgXHVi9239ad216fb170d12165a785173fb673c1.gif'
            } else if (nVal == 'fastMax' && oVal != 'fastMax') {
                this.flowImg =
                    'http://oss.antaimedical.com/images/static/2024/05/663de506eb14d0f049f44ce47tqbNhPDQk6G87eee5514dd88af679cd0560ae7496f1.gif'
            } else if (nVal == 'slow' && oVal != 'slow') {
                this.flowImg =
                    'http://oss.antaimedical.com/images/static/2024/04/662a203aeb14d0f049f44cdbir5Cneau1j0Rddf61b8ea547218ba40c13191f0e7037.gif'
            } else if (nVal == 'slowMin' && oVal != 'slowMin') {
                this.flowImg =
                    'http://oss.antaimedical.com/images/static/2024/05/663de533eb14d0f049f44ce59QTx6KCtX703b0e2d991f001f2b6e7951b6706af7936.gif'
            } else if (nVal == 'none') {
                this.flowImg = ''
            }
        },
        filter_flow(nVal, oVal){
            if (nVal.length) {
                nVal.forEach((item, index) => {
                    setTimeout(() => {
                        oood({ runCode: item, lengthCode: 2, contentCode: item })
                    }, 100)
                })
            }
        },
        filter_CO2CONC(nVal, oVal){
            if (nVal.length) {
                nVal.forEach((item, index) => {
                    setTimeout(() => {
                        oooe({ runCode: item, lengthCode: 2, contentCode: item })
                    }, 100)
                })
            }
        }
    },
    onUnload () {
        uni.$off('pendingData', this.pendingData)
        clearTimeout(this.noting)
        clearInterval(this.timer)
        clearInterval(this.blowNumTimer)
        console.log('onUnload', this.ble.measureState);
        if (this.ble.measureState == 1 || this.ble.measureState == -1) {
            this.$store.commit('changeBleMeasureState', 2)
            ooo8()
        }
    },
    onLoad (OPTIONS) {
        this.type = OPTIONS.type
        this.getInhaleThreeVal()
        ooo4()
        uni.$on('pendingData', this.pendingData)
        this.noting = setTimeout(() => {
            if (!this.startTime) {
                uni.redirectTo({
                    url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                })
            }
        }, 30000)
    },
    methods: {
        // 上传数据
        async uploadData () {
            let that = this
            if (this.ble.measureState == 5) return
            this.$store.commit('changeBleMeasureState', 5)
            let params = {
                "bodyId": this.userInfo.id,
                "deviceId": this.deviceInfo.deviceId,
                "userId": this.userId,
                "flow": this.flow.join(','),
                "CO2CONC": this.CO2CONC.join(','),
                "CO2Rh": this.CO2Rh.join(','),
                "CO2TEMP": this.CO2TEMP.join(','),
                "isException": '1',
                "tag": 10,
                "startTime": this.startTime,
                "endTime": this.endTime,
            }
            let msg = ''
            try {
                let res = await addExpirationData(params)
                msg = res.msg
                this.reset()
                if (res.code == 200) {
                    this.$store.commit('changeBleMeasureState', 3)
                    let params_2 = {
                        "bodyId": this.userInfo.id,
                        "recordId": res.data,
                        "userId": this.userId,
                    }
                    if (this.type == 'update') {
                        delete params_2.bodyId
                        let res_2 = await updateExhaleVal(params_2)
                        if (res_2.code == 200) {
                            let obj = {
                                estimateHaleVol: res_2.data.estimateHaleVol,
                                measureData: res_2.data.haleVol,
                                type: this.type,
                                percent: res_2.data.percent
                            }
                            uni.redirectTo({
                                url: `/pagesB/login/device/measure/success?info=${JSON.stringify(obj)}`
                            })
                        }
                    } else {
                        let res_2 = await addExhaleCorrelationMsg(params_2)
                        if (res_2.code == 200) {
                            let params_3 = {
                                bodyId: this.userInfo.id,
                                flag: 1
                            }
                            const res_3 = await findEffectiveTimes(params_3)
                            if (res_3.code == 200) {
                                if (res_3.data < 3) {
                                    uni.showModal({
                                        title: '提示',
                                        content: `本次上传已完成,此次采集符合采集条件，是否保存此次采集并进入下一步?(合格次数${res_3.data}/3)`,
                                        showCancel: false,
                                        confirmText: '下一步',
                                        success: async (m_res) => {
                                            if (m_res.confirm) {
                                                uni.redirectTo({
                                                    url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                                                })
                                            } else if (m_res.cancel) {
                                                const res_5 = await abandonMeasure({
                                                    id: res_2.data.id
                                                })
                                                uni.redirectTo({
                                                    url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                                                })
                                            }
                                        }

                                    })
                                } else if (res_3.data >= 3) {
                                    // 此时需要判断身体信息是否生效
                                    let params_4 = {
                                        bodyId: this.userInfo.id,
                                        flag: 1
                                    }
                                    const res_4 = await findBodyIsVaild(params_4)
                                    if (res_4.code == 200) {
                                        const res_5 = await findBodyValidException(params_4)
                                        let obj = {
                                            estimateHaleVol: res_2.data.estimateHaleVol,
                                            measureData: res_2.data.haleVol,
                                            type: this.type,
                                            percent: res_2.data.percent,
                                            abnormal: 0,
                                            popFlag: res_4.data.popFlag
                                        }
                                        if (res_5.validException == 1) {
                                            obj.abnormal = 1
                                        }
                                        uni.redirectTo({
                                            url: `/pagesB/login/device/measure/success?info=${JSON.stringify(obj)}`
                                        })
                                    } else {
                                        uni.showModal({
                                            title: "提示",
                                            content: `测量失败`,
                                            showCancel: false,
                                            confirmText: "重新测量",
                                            success: (nextModal) => {
                                                if (nextModal.confirm) {
                                                    uni.redirectTo({
                                                        url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                                                    })
                                                }
                                            }
                                        })
                                    }
                                }
                            }
                        } else if (res_2.code == 'E0035' || res_2.code == 'E0036' || res_2.code == 'E0037' || res_2
                            .code == 'E0011' || res_2.code == 'E0013') {
                            let params_3 = {
                                bodyId: this.userInfo.id,
                                flag: 1
                            }
                            const res_3 = await findEffectiveTimes(params_3)
                            let txt = ''
                            // else if (res_2.code == 'E0011') {
                            // 	txt = '检测到此次采集数据异常，错误码=-3'
                            // } else
                            if (res_2.code == 'E0011') {
                                txt = '检测到此次采集呼气时间小于2秒'
                            } else if (res_2.code == 'E0013') {
                                txt = '测量失败'
                            } else if (res_2.code == 'E0035') {
                                txt = '检测到此次采集没有流量值'
                            } else if (res_2.code == 'E0036') {
                                txt = '检测到此次采集波峰为0'
                            } else if (res_2.code == 'E0037') {
                                txt = '检测到此次采集肺活量过低'
                            }
                            uni.showModal({
                                title: "提示",
                                content: `本次上传已完成，${txt}，不符合采集条件，需继续采集。(合格次数${res_3.data}/3)`,
                                showCancel: false,
                                confirmText: "知道了",
                                success: (nextModal) => {
                                    if (nextModal.confirm) {
                                        uni.redirectTo({
                                            url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                                        })
                                    }
                                }
                            })
                        }
                    }
                } else if (res.code == 'E0019') {
                    console.log('重复数据');
                    this.$store.commit('changeBleMeasureState', 4)
                    wx.reportEvent('num_monitor', {
                        params: '多次上传'
                    })
                } else {
                    this.$store.commit('changeBleMeasureState', 4)
                    uni.showModal({
                        title: "提示",
                        content: `上传失败`,
                        showCancel: false,
                        confirmText: "知道了",
                        success: (nextModal) => {
                            if (nextModal.confirm) {
                                uni.redirectTo({
                                    url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                                })
                            }
                        }
                    })

                }
            } catch (e) {
                console.log("%c Line:563 🍷 报错啦：", "color:#42b983", e);
                //TODO handle the exception
                this.$store.commit('changeBleMeasureState', 4)
                this.reset()
                uni.showModal({
                    title: '提示',
                    content: '测量结果获取失败',
                    showCancel: false,
                    confirmText: '重新测量',
                    success: (errModal) => {
                        if (errModal.confirm) {
                            uni.redirectTo({
                                url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                            })
                        }
                    }
                })
            }
        },
        watchFirst (res) {
            console.log('开始触发')
            this.startTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
            this.$store.commit('changeBleMeasureState', 1)
            this.timer = setInterval(() => {
                if (this.totalTime <= 1) {
                    clearInterval(this.timer)
                    this.flowStatus = 'none'
                    ooo8()
                    this.$store.commit('changeBleMeasureState', 2)
                    this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
                    this.uploadData()
                }
                // this.timeout -= 1
                if (this.timeout != 0) {
                    this.timeout -= 1
                }
                if (this.currentType != 2) {
                    this.currentType = 1
                    this.titleText = '开始吹气'
                }
                this.totalTime -= 1
                this.percent += 1
            }, 1000)
        },
        // 监听状态码
        pendingData (res) {
            if (res.code == 'aa558005') {
                // 按下按钮
                this.watchFirst()
            }
            if (this.ble.measureState == 1) {
                // 测量阶段 aa558007 aa558006
                if (res.code == 'aa55800d') {
                    // 获取补包流量值
                    console.log(JSON.stringify(this.m_flow));
                    if (!this.m_flow.includes(res.runCode)) {
                        this.flow.splice(res.runCode - 1, 0, res.data[res.data.length - 1])
                        this.m_flow.splice(res.runCode - 1, 0, res.runCode)
                    }
                }
                if (res.code == 'aa55800e') {
                    // 获取补包CO2
                    if (!this.CO2CONC.includes(res.runCode)) {
                        this.CO2CONC.splice(res.runCode - 1, 0, res.data[res.data.length - 1])
                        this.m_CO2CONC.splice(res.runCode - 1, 0, res.runCode)
                    }
                }
                if (res.code == 'aa558007') {
                    // 获取CO2
                    let CO2 = res.data[res.data.length - 1]
                    this.CO2CONC.push(CO2)
                    this.m_CO2CONC.push(res.runCode)
                    this.CO2CONC_max = Math.max.apply(-1, this.m_CO2CONC); //数据包的最大索引
                    this.filter_CO2CONC = this.findDisappearedNumbers(this.m_CO2CONC, this.CO2CONC_max).filter(Boolean)
                }
                if (res.code == 'aa558006') {
                    // 获取流量值
                    let infoData = res.data[res.data.length - 1]
                    this.flow.push(infoData)
                    this.allBlowNum = this.allBlowNum + Number(infoData) // 
                    this.percentHeight = Number(((infoData / 63) * 100).toFixed(2))
                    this.m_flow.push(res.runCode)
                    this.flow_max = Math.max.apply(-1, this.m_flow); //数据包的最大索引
                    this.filter_flow = this.findDisappearedNumbers(this.m_flow, this.flow_max).filter(Boolean)
                    if (infoData > this.lineObj.fastMax) {
                        if (this.flowStatus != 'fastMax') {
                            this.flowStatus = 'fastMax'
                        }
                    } else if (infoData < this.lineObj.fastMax && infoData > this.lineObj.flowExpectUpper) {
                        if (this.flowStatus != 'fast') {
                            this.flowStatus = 'fast'
                        }
                    } else if (infoData > this.lineObj.flowExpectDown && infoData < this.lineObj
                        .flowExpectUpper) {
                        if (this.flowStatus != 'normal') {
                            this.flowStatus = 'normal'
                        }
                    } else if (infoData > this.lineObj.slowMin && infoData < this.lineObj.flowExpectDown) {
                        if (this.flowStatus != 'slow') {
                            this.flowStatus = 'slow'
                        }
                    } else if (infoData < this.lineObj.slowMin && infoData > 0) {
                        if (this.flowStatus != 'slowMin') {
                            this.flowStatus = 'slowMin'
                        }
                    } else if (infoData <= 0) {
                        this.flowStatus = 'none'
                    }
                    this.degree.four += 1
                    if (this.exhale_tag == 0) { //如果是在未吹气状态，检测流量值是否连续>exhale_flow_thresh
                        if (infoData > this.exhale_flow_thresh) {
                            this.exhale_num += 1;
                            this.exhale_none = 0;
                        } else {
                            this.exhale_num = 0;
                            this.exhale_none += 1
                        }
                    } else { //如果是在已吹气状态，检测流量值是否连续<exhale_flow_thresh
                        if (infoData < this.exhale_flow_thresh) {
                            this.exhale_stop_num += 1;
                        } else {
                            this.exhale_stop_num = 0;
                        }
                    }
                    if (this.exhale_num > this.exhale_num_thresh) { //连续突破阈值，认定为【开始吹气】
                        console.log("开始吹气！！！！，开始位点次数：" + this.exhale_num);
                        this.showTimeout = false
                        this.exhale_tag = 1;
                        this.titleText = "持续吹气"
                        this.currentType = 2
                        this.exhale_num = 0;
    
                    }
                    if (this.exhale_stop_num > this.exhale_stop_num_thresh) { //连续突破阈值，认定为【停止吹气】
                        console.log("停止吹气！！！！，停止位点次数：" + this.exhale_stop_num);
                        // 结束上传
                        this.$store.commit('changeBleMeasureState', 2)
                        ooo8()
                        this.exhale_tag = 0;
                        this.exhale_stop_num = 0;
                        clearInterval(this.timer)
                        clearInterval(this.blowNumTimer)
                        this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
                        this.uploadData()
                    }
                    if (this.exhale_none == 100) {
                        console.log('十秒内未吹气')
                        console.log(this.flow)
                        ooo8()
                        this.$store.commit('changeBleMeasureState', 2)
                        uni.showModal({
                            title: '提示',
                            content: '测量失败,检测到十秒内未吹气',
                            showCancel: false,
                            confirmText: '重新测量',
                            success: (errModal) => {
                                if (errModal.confirm) {
                                    uni.redirectTo({
                                        url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                                    })
                                }
                            }
                        })
                    }
                }
            }
        },
        // 监听数据
        watchData (res) {
            let that = this
            let str = res.substring(16, res.length - 4)
            console.log(str)
            let newArr = []
            let arr = str.split('')
            let item = ''
            for (var i = 0; i < arr.length; i++) {
                item += arr[i]
                if (i % 2 == 1 && i != 0) {
                    newArr.push(item)
                    item = ''
                }
            }
            // 将测量的数据分成每一项数组
            let itemEach = this.getNewArray(newArr, 7)
            // 遍历他们后类加成字符串
            itemEach.forEach((item, index) => {
                let data = ''
                let id = ''
                item.forEach((item1, index1) => {
                    if (index1 != 0 && index1 != 1 && index1 != 2) {
                        data += item1
                    }
                    if (index1 > 0 && index1 <= 2) {
                        id += item1
                    }
                })
                let infoData = hex2float(data)
                let s_id = hex2int(id)
                if (item[0] == '01') { // 浓度
                    this.CO2CONC.push(infoData)
                    this.m_CO2CONC.push(s_id)
                    this.degree.one += 1
                } else if (item[0] == '02') { // 温度
                    this.CO2TEMP.push(infoData)
                    this.m_CO2TEMP.push(s_id)
                    this.degree.two += 1
                    // itemEach.forEach((_item, _index) => {
                    // 	if (_item[0] == '0c') {
                    // 		if (this.type == 'inhale') {
                    // 			console.log(_item[1] + _item[2]);
                    // 			this.totalValue = hex2int(_item[1] + _item[2])
                    // 		} else {
                    // 			console.log(_item[4] + _item[5]);
                    // 			this.totalValue = hex2int(_item[4] + _item[5])
                    // 		}
                    // 	}
                    // })
                } else if (item[0] == '03') { // 湿度
                    this.CO2Rh.push(infoData)
                    this.m_CO2Rh.push(s_id)
                    this.degree.three += 1
                } else if (item[0] == '04') {
                    console.log("%c Line:656 🍷 infoData", "color:#465975", infoData);
                    this.allBlowNum = this.allBlowNum + Number(infoData) // 
                    this.percentHeight = Number(((infoData / 63) * 100).toFixed(2))
                    if (infoData > this.lineObj.fastMax) {
                        if (this.flowStatus != 'fastMax') {
                            this.flowStatus = 'fastMax'
                        }
                    } else if (infoData < this.lineObj.fastMax && infoData > this.lineObj.flowExpectUpper) {
                        if (this.flowStatus != 'fast') {
                            this.flowStatus = 'fast'
                        }
                    } else if (infoData > this.lineObj.flowExpectDown && infoData < this.lineObj
                        .flowExpectUpper) {
                        if (this.flowStatus != 'normal') {
                            this.flowStatus = 'normal'
                        }
                    } else if (infoData > this.lineObj.slowMin && infoData < this.lineObj.flowExpectDown) {
                        if (this.flowStatus != 'slow') {
                            this.flowStatus = 'slow'
                        }
                    } else if (infoData < this.lineObj.slowMin && infoData > 0) {
                        if (this.flowStatus != 'slowMin') {
                            this.flowStatus = 'slowMin'
                        }
                    } else if (infoData <= 0) {
                        this.flowStatus = 'none'
                    }
                    this.flow.push(infoData)
                    this.m_flow.push(s_id)
                    this.degree.four += 1
                    if (this.exhale_tag == 0) { //如果是在未吹气状态，检测流量值是否连续>exhale_flow_thresh
                        if (infoData > this.exhale_flow_thresh) {
                            this.exhale_num += 1;
                            this.exhale_none = 0;
                        } else {
                            this.exhale_num = 0;
                            this.exhale_none += 1
                        }
                    } else { //如果是在已吹气状态，检测流量值是否连续<exhale_flow_thresh
                        if (infoData < this.exhale_flow_thresh) {
                            this.exhale_stop_num += 1;
                        } else {
                            this.exhale_stop_num = 0;
                        }
                    }
                    if (this.exhale_num > this.exhale_num_thresh) { //连续突破阈值，认定为【开始吹气】
                        console.log("开始吹气！！！！，开始位点次数：" + this.exhale_num);
                        this.showTimeout = false
                        this.exhale_tag = 1;
                        this.titleText = "持续吹气"
                        this.currentType = 2
                        this.exhale_num = 0;

                    }
                    if (this.exhale_stop_num > this.exhale_stop_num_thresh) { //连续突破阈值，认定为【停止吹气】
                        console.log("停止吹气！！！！，停止位点次数：" + this.exhale_stop_num);
                        // 结束上传
                        this.$store.commit('changeBleMeasureState', 2)
                        BLE.common.withoutSendEnd('end')
                        this.exhale_tag = 0;
                        this.exhale_stop_num = 0;
                        this.flow_max = Math.max.apply(-1, this.m_flow) + 1; //数据包的最大索引
                        this.CO2CONC_max = Math.max.apply(-1, this.m_CO2CONC) + 1; //数据包的最大索引
                        this.CO2Rh_max = Math.max.apply(-1, this.m_CO2Rh) + 1; //数据包的最大索引
                        this.CO2TEMP_max = Math.max.apply(-1, this.m_CO2TEMP) + 1; //数据包的最大索引
                        let m_flow = this.findDisappearedNumbers(this.m_flow, this.flow_max)
                        let m_CO2CONC = this.findDisappearedNumbers(this.m_CO2CONC, this.CO2CONC_max)
                        let m_CO2Rh = this.findDisappearedNumbers(this.m_CO2Rh, this.CO2Rh_max)
                        let m_CO2TEMP = this.findDisappearedNumbers(this.m_CO2TEMP, this.CO2TEMP_max)
                        let dataArr = []
                        if (m_flow.length) {
                            m_flow = m_flow.map(item => {
                                return '04' + intHex2(item)
                            })
                            console.log(m_flow)
                            dataArr = dataArr.concat(m_flow)
                        }
                        if (m_CO2CONC.length) {
                            m_CO2CONC = m_CO2CONC.map(item => {
                                return '01' + intHex2(item)
                            })
                            console.log(m_CO2CONC)
                            dataArr = dataArr.concat(m_CO2CONC)
                        }

                        if (m_CO2Rh.length) {
                            m_CO2Rh = m_CO2Rh.map(item => {
                                return '03' + intHex2(item)
                            })
                            console.log(m_CO2Rh)
                            dataArr = dataArr.concat(m_CO2Rh)
                        }

                        if (m_CO2TEMP.length) {
                            m_CO2TEMP = m_CO2TEMP.map(item => {
                                return '02' + intHex2(item)
                            })
                            console.log(m_CO2TEMP)
                            dataArr = dataArr.concat(m_CO2TEMP)
                        }
                        if (dataArr.length) {
                            let arr_1 = []
                            let arr_2 = dataArr.join('').split('')
                            let infoItem = ''
                            for (var i = 0; i < arr_2.length; i++) {
                                infoItem += arr_2[i]
                                if (i % 2 == 1 && i != 0) {
                                    arr_1.push(infoItem)
                                    infoItem = ''
                                }
                            }
                            // 将每个要查询的区分好 （固定三个字节 第一个代表要查询的数据项， 后面两个代表准确的查询下标id）
                            let itemEachArr = this.getNewArray(arr_1, 3)
                            // 再将他们呢区分最大每次能发五个 减少每次只查一个数据 浪费资源
                            let MaxitemEach = this.getNewArray(itemEachArr, 6)
                            console.log(itemEachArr)
                            console.log(MaxitemEach)
                            MaxitemEach.forEach((item, index) => {
                                let allArr = []
                                item.forEach(i => {
                                    allArr = [...allArr, ...i]
                                })
                                console.log(allArr)
                                setTimeout(() => {
                                    BLE.common.withoutInquire(allArr, 'inquire')
                                }, 100)
                            })
                        } else {
                            clearInterval(this.timer)
                            clearInterval(this.blowNumTimer)
                            this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
                            this.uploadData()
                        }
                    }
                    if (this.exhale_none == 100) {
                        console.log('十秒内未吹气')
                        console.log(this.flow)
                        BLE.common.withoutSendEnd('end')
                        this.$store.commit('changeBleMeasureState', 2)
                        uni.showModal({
                            title: '提示',
                            content: '测量失败,检测到十秒内未吹气',
                            showCancel: false,
                            confirmText: '重新测量',
                            success: (errModal) => {
                                if (errModal.confirm) {
                                    uni.redirectTo({
                                        url: `/pagesB/login/device/measure/exhale?type=${this.type}`
                                    })
                                }
                            }
                        })
                    }
                } else if (item[0] == '0b' && item[1] == '01' && item[3] != '00' && item[3] != '01') {
                    uni.showModal({
                        title: "提示",
                        content: '仪器出现意外错误,即将断开蓝牙,请重新连接后继续测试',
                        showCancel: false,
                        success: (modal) => {
                            if (modal.confirm) {
                                wx.closeBLEConnection({
                                    deviceId: that.ble.devID,
                                    success: () => {
                                        console.log('断开成功')
                                    },
                                    complete: () => {
                                        if (that.type == 'default') { // 默认注册流程
                                            uni.redirectTo({
                                                url: '/pagesB/login/device/connect/index'
                                            })
                                        } else { // 更新肺活量流程
                                            uni.redirectTo({
                                                url: '/pagesA/health/device/connect/index?type=updateExhale'
                                            })
                                        }
                                    }
                                })
                            }
                        }
                    })
                }
            })
        },
        // 监听查询数据
        watchInquire (res) {
            let str = res.substring(22, res.length - 4)
            console.log(str)
            let newArr = []
            let arr = str.split('')
            let item = ''
            for (var i = 0; i < arr.length; i++) {
                item += arr[i]
                if (i % 2 == 1 && i != 0) {
                    newArr.push(item)
                    item = ''
                }
            }
            // 将测量的数据分成每一项数组
            let itemEach = this.getNewArray(newArr, 7)
            // 遍历他们后类加成字符串
            itemEach.forEach((item, index) => {
                let data = ''
                let id = ''
                item.forEach((item1, index1) => {
                    if (index1 != 0 && index1 != 1 && index1 != 2) {
                        data += item1
                    }
                    if (index1 > 0 && index1 <= 2) {
                        id += item1
                    }
                })
                let infoData = hex2float(data)
                let s_id = hex2int(id)
                if (item[0] == '01') { // 浓度
                    this.CO2CONC.splice(s_id, 0, infoData)
                    this.m_CO2CONC.splice(s_id, 0, s_id)
                    this.degree.one += 1
                } else if (item[0] == '02') { // 温度
                    this.CO2TEMP.splice(s_id, 0, infoData)
                    this.m_CO2TEMP.splice(s_id, 0, s_id)
                    this.degree.two += 1
                } else if (item[0] == '03') { // 湿度
                    this.CO2Rh.splice(s_id, 0, infoData)
                    this.m_CO2Rh.splice(s_id, 0, s_id)
                    this.degree.three += 1
                } else if (item[0] == '04') {
                    console.log(infoData)
                    this.flow.splice(s_id, 0, infoData)
                    this.m_flow.splice(s_id, 0, s_id)
                    this.degree.four += 1
                }
            })
            if (this.integrity) {
                clearInterval(this.timer)
                this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
                this.uploadData()
            }
        },
        async getInhaleThreeVal () {
            let params = {
                height: this.userInfo.height
            }
            const res = await findInhaleThreeVal(params)
            if (res.code == 200) {
                let fastMax = Number(res.data.flowExpectUpper) + (res.data.flowExpect * 0.2)
                let slowMin = Number(res.data.flowExpectDown) - (res.data.flowExpect * 0.2)
                fastMax = fastMax.toFixed(2)
                slowMin = slowMin.toFixed(2)
                this.lineObj = {
                    fastMax,
                    slowMin,
                    flowExpectDown: res.data.flowExpectDown,
                    flowExpectUpper: res.data.flowExpectUpper,
                    flowExpect: res.data.flowExpect
                }
                this.lowP = Number((res.data.flowExpectDown / 63 * 100).toFixed(2))
                this.midP = Number((res.data.flowExpect / 63 * 100).toFixed(2))
                this.highP = Number((res.data.flowExpectUpper / 63 * 100).toFixed(2))
                this.measureInfo[2].data = parseInt(res.data.flowExpectUpper)
                this.measureInfo[4].data = parseInt(res.data.flowExpectDown)
            }
        },
        reset () {
            this.flow = []
            this.CO2CONC = []
            this.CO2Rh = []
            this.CO2TEMP = []
            this.m_flow = []
            this.m_CO2CONC = []
            this.m_CO2Rh = []
            this.m_CO2TEMP = []
            this.degree = {
                one: 0,
                two: 0,
                three: 0,
                four: 0
            }
        },
        getNewArray (array, subGroupLength) {
            let index = 0;
            let newArray = [];
            while (index < array.length) {
                newArray.push(array.slice(index, (index += subGroupLength)));
            }
            return newArray;
        },
        findDisappearedNumbers (arr, max) {
            let nums = JSON.parse(JSON.stringify(arr))
            const set = new Set(nums);
            const res = [];
            for (let i = 0; i < max; i++) {
                if (!set.has(i)) {
                    res.push(i);
                }
            }
            return res;
            // let res = []
            // for (let i = 0; i < nums.length; i++) {
            // 	let index = Math.abs(nums[i]) - 1 //防止遇到已经更改为负值的元素
            // 	nums[index] = Math.abs(nums[index]) * -1 // 防止遇到重复的数组元素
            // }
            // for (let i = 0; i < nums.length; i++) { //找出不为负值的数组元素的下标
            // 	if (nums[i] > 0 && (i + 1) <= max) {
            // 		res.push(i + 1)
            // 	}
            // }
            // return res
        },
        getColorList (index) {
            if (index == 0) {
                return '#5C66DF'
            } else if (index == 1) {
                return '#ABB0EF'
            } else if (index == 2) {
                return '#d2d5f7'
            } else if (index == 3) {
                return '#e4e7ff'
            } else if (index == 4) {
                return '#F1F3FD'
            } else if (index == 5) {
                return '#ffffff'
            }
        }
    }
}
</script>

<style lang="scss">
page {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background: #fff;
}
</style>
<style lang="scss" scoped>
.measure {
    width: 100%;
    font-family: PingFangSC, PingFang SC;
    padding-bottom: 96rpx;

    .btn1 {
        width: 200rpx;
        height: 80rpx;
        background-color: #169bd5;
        color: #fff;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        font-weight: 400;
        border-radius: 20rpx;
        margin: 30rpx auto;
    }

    .container {
        position: relative;
        padding: 0 78rpx;
        font-family: PingFangSC, PingFang SC;
        color: #333333;

        .title {
            font-weight: 500;
            font-size: 42rpx;
            line-height: 58rpx;
            margin: 48rpx 0 16rpx 0;
            text-align: left;
        }

        .sub-title {
            text-align: left;
            font-size: 28rpx;
            line-height: 40rpx;
        }

        .sub-title-text {
            text-align: left;
        }

        .breathe {
            display: block;
            width: 462rpx;
            height: 462rpx;
            margin: 48rpx auto 0;
            position: relative;

            .breathe_gif {
                width: 100%;
                height: 100%;
            }

            .tip_container {
                width: 218rpx;
                height: 218rpx;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .total {
                    font-size: 38rpx;
                    font-weight: 500;
                }

                .tip_txt {
                    font-size: 28rpx;
                }
            }
        }

        .total_bar {
            position: absolute;
            right: 48rpx;
            bottom: 0;
            width: 144rpx;
            height: 542rpx;
            padding: 36rpx 0 38rpx 30rpx;
            border-radius: 16rpx;
            background-color: rgba(84, 93, 222, 0.05);

            .tag {
                display: flex;
                align-items: center;
                position: relative;

                .min,
                .max,
                .low,
                .mid,
                .high {
                    position: absolute;
                    left: 48rpx;
                    transform: translateY(50%);
                    z-index: 888;
                    font-size: 20rpx;
                    color: #666666;
                }

                .mid {
                    color: #545DDE;
                }

                .max {
                    bottom: 100%;
                    transform: translateY(100%);
                }

                .min {
                    bottom: 0;
                    transform: translateY(0);
                }

                // .normal_c {
                // 	position: absolute;
                // 	left: 0%;
                // 	bottom: 50%;
                // 	transform: translateY(50%);
                // 	z-index: 888;
                // 	width: 82rpx;
                // 	height: 98rpx;
                // 	display: flex;
                // 	justify-content: space-between;

                // 	.normal {
                // 		width: 38rpx;
                // 		height: 98rpx;
                // 		position: absolute;
                // 		left: 0;
                // 		bottom: 50%;
                // 		transform: translateY(50%);
                // 	}

                // 	.right {
                // 		display: flex;
                // 		flex-direction: column;
                // 		justify-content: space-between;

                // 		text {
                // 			font-size: 16rpx;
                // 			color: #666666;
                // 		}
                // 	}
                // }
            }

            .bar {
                height: 432rpx;
                width: 34rpx;
                border-radius: 17rpx;
                background-color: #fff;
                border: 0rpx solid #e3e4e9;
                overflow: hidden;
                margin-right: 14rpx;
                position: relative;

                .grid {
                    width: 100%;
                    height: 16.66%;
                }

                // .normal {
                // 	width: 38rpx;
                // 	height: 98rpx;
                // 	position: absolute;
                // 	left: 0;
                // 	bottom: 50%;
                // 	transform: translateY(50%);
                // }

                .triangle {
                    width: 0;
                    height: 0;
                    border-left: 12rpx solid transparent;
                    border-right: 12rpx solid transparent;
                    border-top: 12rpx solid #f1c56b;
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                    z-index: 999;
                }
            }

            .b-r {
                height: 294rpx;
                width: 34rpx;

                .grid {
                    width: 100%;
                    height: 16.66%;
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;

                    .txt {
                        margin-top: -10rpx;
                        font-size: 16rpx;
                        color: #666666;
                    }

                    .none {
                        margin-top: 0;
                    }

                    .o_c {
                        color: #545DDE;
                    }
                }

                .other {
                    align-items: flex-end;
                }
            }

            .tips {
                margin-top: 24rpx;
                font-size: 16rpx;
                text-align: left;
                color: #545DDE;
            }
        }

    }

    .flow-fast {
        display: block;
        width: 192rpx;
        height: 478rpx;
        margin: 16rpx auto 0;
    }

    .progress_b {
        margin: 0 auto;
        width: 332rpx;

        .timeout {
            font-weight: 500;
            font-size: 32rpx;
            color: #666666;
            margin-bottom: 32rpx;
            text-align: center;
        }
    }
}

.container {
    .steps-box {
        margin-top: 96rpx;
    }

    .steps-item.acitve {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #545DDE;
    }

    .steps-item {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #CCCCCC;
    }

    .steps-icon {
        width: 92rpx;
        height: 92rpx;
        border: 4rpx solid #D8D8D8;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #D8D8D8;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .steps-icon.steps-icon-acitve {
        border: 0;
        background: #545DDE;
        width: 92rpx;
        height: 92rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /deep/.u-steps-item__wrapper--row {
        width: initial;
        height: initial;
    }

    /deep/.u-steps-item__line--row {
        top: 48rpx;
        background-color: #D8D8D8 !important;
    }

    .cutline {
        background: #FAFAFA;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 120rpx;

        .steps-title {
            margin-top: -56rpx;
            width: 112rpx;
            height: 112rpx;
            background: #FFFFFF;
            border: 2rpx solid #E5E5E5;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 48rpx;
            color: #545DDE;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .steps-img {
            width: 460rpx;
            height: 460rpx;

            .start {
                width: 460rpx;
                height: 460rpx;
            }
        }

        .steps-tip {
            margin-bottom: 32rpx;
            padding: 38rpx 32rpx;
            background: #FFFFFF;
            border-radius: 2rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #666666;
            text-align: left;

        }

    }

    .text {
        margin-top: 96rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 42rpx;
        color: #666666;
    }

    .blow-text {
        margin-top: 96rpx;
        text-align: left;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 42rpx;
        color: #666666;
    }

    .blow-box {
        margin-top: 48rpx;
        box-sizing: border-box;
        padding: 48rpx;
        width: 382rpx;
        height: 542rpx;
        background: rgba(84, 93, 222, 0.05);
        border-radius: 16rpx;

        .blow-num {
            margin-top: 96rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 96rpx;
            color: #545DDE;
        }
    }

    .time-icon {
        position: relative;
        width: 180rpx;
        height: 180rpx;
        margin: 40rpx auto;
        display: flex;
        justify-content: center;
        align-items: center;

        .time-num {
            width: 168rpx;
            height: 168rpx;
            background: #545DDE;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 64rpx;
            color: #FFFFFF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .circle {
            width: 180rpx;
            height: 180rpx;
            border: 4rpx solid rgba(84, 93, 222, 0.5);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: change 2s linear infinite;
        }
    }
}

@keyframes change {
    0% {
        width: 168rpx;
        height: 168rpx;
    }

    50% {
        width: 210rpx;
        height: 210rpx;
    }

    100% {
        width: 168rpx;
        height: 168rpx;
    }

}
</style>